<template>
    <div>
        <el-card shadow="hover">
            <div slot="header" style="color: #515A6E; font-weight: bold ">
                <span>{{ $i18n.t('TODAY_DUE_ORDER_AMOUNT') }}：{{ notice.total }}</span>
            </div>
            <el-table :data="notice.data" border style="width: 100%" :header-cell-style="{background:'#91C7AE', color: '#515A6E'}" v-loading="loading">
                <el-table-column align="center" prop="date"  min-width="150"></el-table-column>
                <el-table-column align="center" prop="h2_rate" :label="$i18n.t('H2_RECOVERY_RATE')" :render-header="renderHeader" min-width="150"></el-table-column>
                <el-table-column align="center" prop="h1_rate" :label="$i18n.t('H1_RECOVERY_RATE')" min-width="150"></el-table-column>
                <el-table-column align="center" prop="h0_rate" :label="$i18n.t('H0_RECOVERY_RATE')" min-width="150"></el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: 'NoticeOverview',
        props: {
            notice: {
                type: Object,
                required: true
            },
            loading: {
                type: Boolean,
                required: true
            }
        },
        methods: {
            renderHeader (h, { column }) {
                return h('div', [h('span', column.label), h('el-tooltip', { props: { effect: 'dark', content: this.$t('H2_DUE_TIP'), placement: 'top' } }, [h('i', {
                    class: 'el-icon-question',
                    style: 'margin-left:5px;cursor:pointer;'
                })])])
            }
        }
    }
</script>

<style>
    .el-tooltip__popper {
        max-width: 150px;
        background-color: #585E6B !important;
    }
    /*修改tooltip的箭头颜色*/
    .el-tooltip__popper[x-placement^=top] .popper__arrow::after {
        border-top-color: #515b62 !important;
    }
    .el-tooltip__popper[x-placement^=top] .popper__arrow{
        border-top-color: #515b62 !important;
    }
</style>
